<template>
	<view>
		<view class="">
			/* #ifdef MP-WEIXIN */
			<view style="height: 44px;width: 100%;"></view>
			<view style="top:0;z-index: 100;" class="position-fixed flex bg-white w-100 py-2">
				<view @click="selectOrder(index)" v-for="(item,index) in orderStatusEnum" class="position-relative flex-1 flex justify-center" :class="status==index ? 'active text-dark font-weight-bold': 'text-muted'">{{item}}<view v-if="status==index" style="position: absolute; height:10rpx;width: 100rpx; background-color: #FC4353;border-radius: 10rpx;bottom: -15rpx;"></view></view>
			</view>
			/* #endif */
			/* #ifndef MP-WEIXIN */
			<view style="height: 44px;width: 100%;"></view>
			<view style="top:44px;z-index: 100;" class="position-fixed flex bg-white w-100 py-2">
				<view @click="selectOrder(index)" v-for="(item,index) in orderStatusEnum" class="position-relative flex-1 flex justify-center" :class="status==index ? 'active text-dark font-weight-bold': 'text-muted'">{{item}}<view v-if="status==index" style="position: absolute; height:10rpx;width: 100rpx; background-color: #FC4353;border-radius: 10rpx;bottom: -15rpx;"></view></view>
			</view>
			/* #endif */
			
			
		</view>
		<view class="myOrder">
		  <view class="list">
				<view class="item" v-for="(item, index) in orderList" :key="index">
					<view class="orderNumber">
						<text>下单时间：{{ formatTime(item.createdTime) }}</text>
						<text>{{ statusEnum(item.status) }}</text>
					</view>
					
					<view class="content" @click="goToOrderDetail(item.orderCode)" v-for="orderItem in item.orderItems">
						<view class="left">
							<image :src="orderItem.productImg"></image>
							<view class="left-list">
								<text>{{ orderItem.productName }}</text>
								<text class="two"></text>
								<text class="three">¥{{ item.totalPrice }}</text>
							</view>
						</view>
						<view class="right">
							<text>x{{item.orderItems.length}}</text>
						</view>
					</view>
					
					<view class="button-list">
						<view class="button mr-1" @click="goPayPage(item.orderCode)" v-if="item.status == 0">付款</view>
						<view class="button" @click="goToAgainBuy(item)">再次购买</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	
</template>

<script setup>
import { orderQueryOrdersByPage, againBuy } from "@/api/order/order.js"
import { ref, computed } from "vue";
import { useStore } from 'vuex';
import { onLoad, onShow } from "@dcloudio/uni-app";
import { formatTime } from "@/utils/common/date-util.js"
import { orderStatusEnum } from "@/utils/common/const.js"

const store = useStore();

const status = ref(0)
onLoad((e) => {
	if(e.data){
		status.value = e.data
	}
	handleGetOrderList();
});

const orderList = ref([]);

const statusEnum = computed(() => {
	return (index) => {
		const arr = orderStatusEnum;
		return arr[index];
	}
});

const selectOrder = (index)=>{
	status.value = index
	handleGetOrderList()
}

const goPayPage = (orderCode) => {
	uni.navigateTo({
		url:"/pages/pay/pay?data="+orderCode
	})
	
}

const goToAgainBuy = async (order) => {
	let res = await againBuy({orderCode: order.orderCode})
	console.log("再次购买",res);
	if(res.code == 200){
		let result = res.data
		if (!result.length) {
			uni.toast('请选择商品后下单');
			return
		}
		uni.navigateTo({
			url:"/pages/orderConfirm/orderConfirm?data="+JSON.stringify(result)
		})
	}
	
}

const handleGetOrderList = () => {
	const params = {
		page: 1,
		size: 100,
		status: status.value
	};
	orderQueryOrdersByPage(params).then(res => {
		if (res.code === 200) {
			orderList.value = res.data.data;
		}
	})
}

const goToOrderDetail = (orderCode)=>{
	uni.navigateTo({
		url:"/pages/orderDetail/orderDetail?data="+orderCode
	})
}
</script>

<style lang="scss" scoped>
@import '../../static/css/public.scss';

.myOrder {
	margin: 20rpx 30rpx;
	
	.list {
		.item {
			background-color: #FFFFFF;
			margin-bottom: 16rpx;
			padding: 22rpx 30rpx;
			border-radius: 20rpx;
			
			.orderNumber {
				@include fja();
				
				text {
					font-weight: 500;
					@include sc(26rpx, #333);
					
					&:last-child {
						@include sc(28rpx, #F7831E);
					}
				}
			}
			
			.content {
				display: flex;
				justify-content: space-between;
				padding-top: 34rpx;
				
				.left {
					display: flex;
					
					image {
						display: block;
						margin-right: 20rpx;
						@include wh(128rpx, 128rpx);
					}
					
					.left-list {
						display: flex;
						flex-direction: column;
						flex: 1;
						
						text {
							@include sc(26rpx, #333);
						}
						
						.two {
							padding-top: 10rpx;
							padding-bottom: 15rpx;
							color: #999;
						}
						
						.three {
							@include sc(30rpx, #F7831E);
						}
					}
				}
				
				.right {
					text {
						@include sc(28rpx, #999);
					}
				}
			}
			
			.button-list {
				padding-top: 21rpx;
				display: flex;
				justify-content: flex-end;
				
				.button {
					@include sc(26rpx, #F7831E);
					@include wh(160rpx, 60rpx);
					@include lineH(60rpx);
					border: solid 1rpx #F7831E;
					border-radius: 30rpx;
					text-align: center;
				}
			}
		}
	}
}
</style>
